{% extends 'base/base.html' %}
{% block title %}
<title>agem个人中心</title>
{% endblock %}
{% block css %}
<style>
    .head{
        position: relative;
        width: 100px;
        height: 100px;
    }

    .head input{
        width: 100px;
        height: 100px;
        position: absolute;
        z-index: 100;
        opacity: 0;
    }

    .head img{
        width:100%;
        height: 100%;
        position: absolute;
        z-index: 90;
        border-radius: 50%
    }

</style>

{% endblock %}
{% block js %}
<script>
  window.onload = function(){

        let head_input = document.querySelector(".head input");
        let head_img = document.querySelector(".head img");

        head_input.onchange = function(){
            const file = head_input.files[0];
            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    head_img.src = e.target.result; // 设置预览图像源
                };

                reader.readAsDataURL(file); // 读取文件
            }
        }
    }
</script>
{% endblock %}

{% block body %}
<div class="body_content_wrapper pb-2">
    <div class="container xcontainer">
        <section class="bg-dark rounded-3 g-0 p-3 text-white">
            <div id="user_profile_wrapper">
                <div class="video_list_box mb-3">
                    <div class="video_list_box--hd">
                            <h6 class="title"><script>document.writeln(AGE.hello());</script>{{ user.username }}</h6>
                    </div>
                    <div class="video_list_box--bd">
                        <div class="row">
                            <div class="profile_list col-2">
                                <div class="list-group list-group-flush">
                                    <a class="list-group-item d-flex justify-content-between align-items-center active " href='{% url "user:center" %}'>个人中心 <i class="bi-house-door"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center " href='{% url "operate:collect" %}'>我的收藏<i class="bi bi-heart"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center  " href='{% url "history:anime_history" %}'>历史记录<i class="bi bi-clock-history"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center " href='{% url "user:updatepassword" %}'>修改密码<i class="bi bi-lock"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center" href='{% url "user:logout" %}' >退出登录 <i class="bi bi-box-arrow-right"></i></a>
                                </div>
                            </div>
                            <div class="col-10">
                                <div class="video_list_box collect_list">
                                <div class="video_list_box--bd">
                                    <form id="resetPasswordForm" class="reset_password_form" enctype="multipart/form-data" method="post">
                                        {% csrf_token %}
                                        <div class="input-group-sm mb-2">
                                        {{ cf.head.label_tag }}
                                            <div class="head">
                                            {{ cf.head }}
                                            <img src="/media/{{ request.user.head }}" alt="" class="">
                                            </div>
                                         </div>
                                        <div class="input-group-sm mb-2">
                                        {{ cf.username.label_tag }}
                                        {{ cf.username }}
                                        </div>
                                        <div class="input-group-sm mb-2">
                                        {{ cf.email.label_tag }}
                                        {{ cf.email }}
                                        </div>
                                        <div class="input-group-sm mb-2">
                                        {{ cf.telephone.label_tag }}
                                        {{ cf.telephone }}
                                        </div>
                                        <div class="input-group-sm mb-2">
                                        {{ cf.last_name.label_tag }}
                                        {{ cf.last_name }}
                                        </div>
                                        <div class="input-group-sm mb-2">
                                        {{ cf.first_name.label_tag }}
                                        {{ cf.first_name }}
                                        </div>
                                        <div class="input-group-sm mb-2">
                                        {% for field in cf %}
                                        {% if field.errors %}
                                        {% if errors %}
                                            <div class="tips mt-2 failed" style="display: block;">{{ errors }}</div>
                                        {% endif %}
                                        {% endif %}
                                        {% endfor %}
                                        </div>
                                        <button id="btnPasswordChange" type="submit" class="btn btn-primary btn-sm">保存</button>
                                        <div class="input-group-sm mb-2">
                                        上次登录时间：
                                        {{ request.user.last_login }}
                                        </div>
                                    </form>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>
{% endblock %}